<template>
  <div>
    <h1 v-text="num"></h1>
    <button @click="sub">-1</button>
    <button @click="add">+1</button>

    <hr />

    <input type="text" @keyup.enter="confirm" v-model="task" />

    <div v-for="(item, idx) in list" :key="item.id">
      <span v-text="item.id"></span> --
      <span v-text="item.task"></span>
      <button @click="delTodo(idx)">删除</button>
    </div>
  </div>
</template>

<script setup>
import useCounter from "../../hooks/useCounter";
import useTodo from "../../hooks/useTodo";

const { num, add, sub } = useCounter();
const { task, list, confirm, delTodo } = useTodo();
</script>

<style lang="scss" scoped>
</style>